<template>
  <div>
    <Return txt="绑定手机号"></Return>
    <div class="msg">
      <img src="../../../assets/images/phone.png" alt="" />
    </div>
    <div class="phoneNum">你的手机号:12345678988</div>
    <div class="phonemsg">
      上传你的手机通讯录后，可查看你通讯录中哪些朋友注册了AI
    </div>
    <div class="button" style="margin-top: 100px">
      <van-button type="primary" size="large" @click="clickTap"
        >上传通讯录找朋友</van-button
      >
    </div>
    <div class="button" style="margin-top: 20px">
      <van-button size="large" type="primary" plain @click="genghuanTap">更换手机号</van-button>
    </div>
  </div>
</template>
<script>
import Return from "../../../components/return";
import { Dialog } from 'vant';
export default {
  components: {
    Return,
  },
  data() {
    return {};
  },
  methods: {
    clickTap() {
      Dialog.alert({
        message: "AI无法访问你的通讯录，无法帮你添加朋友。请在设置-隐私-通讯录里允许AI访问你的通讯录",
      }).then(() => {
           this.$router.push('linkmen');
      });
    },
    genghuanTap(){
       this.$router.push('phoneone'); 
    }
  },
};
</script>
<style scoped>
.msg {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.msg img {
  width: 100px;
}
.phoneNum {
  margin-top: 20px;
  color: #333333;
  font-size: 22px;
  text-align: center;
}
.phonemsg {
  font-size: 12px;
  color: #868686;
  margin-top: 20px;
  text-align: center;
}
.button {
  width: 60%;
  margin-left: 20%;
}
</style>